<!-- 首页菜单游戏元素 -->
<template>
    <div class="sub_menu_3_it">
        <div class="sub_menu_3_it_img">
            <img style="width: 100%; height: 100%" :src="props.pic" alt="img" />
            <div class="masking_layer" v-if="props.ismMintain === 1">
                <iconpark-icon class="maskin_img" name="padlock1" size="28" />
                <span>{{ t('game_page_coming_soon') }}</span>
                <span>{{ t('game_page_stay_tuned') }}</span>
            </div>
        </div>
        <div class="sub_menu_3_it_name">{{ props.name }}</div>


    </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const props = defineProps({
    ismMintain: {
        type: [Number, String],
        default: ''
    },
    pic: {
        type: String,
        default: ''
    },
    name: {
        type: String,
        default: ''
    }
})
</script>

<style lang="less" scoped>
.sub_menu_3_it {
    margin-right: 26px;
    cursor: pointer;
    width: 90px;
    overflow: hidden;
    flex-shrink: 0;

    .sub_menu_3_it_img {
        width: 90px;
        height: 90px;
        border-radius: 5px;
        position: relative
    }

    .sub_menu_3_it_name {
        color: #fff;
        text-align: center;
        font-size: 15px;
        margin: 13px 0;
    }

    .masking_layer {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(1px);
        background: rgba(0, 0, 0, 0.6);
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        color: #ffffff;


        .maskin_img {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
        }

    }
}
</style>